<template>
  <div class="webHome">
    <!-- 加入我们 -->
    <Row>
      <Col :span="24">
        <div class="webHomeJoinUs">
          <img
            class
            src="@/assets/images/web_home_join_us.png"
            style="width:100%"
          />
          <Button class="webHomeJoinUsBtn" type="primary">加入我们</Button>
        </div>
      </Col>
    </Row>
    <!-- 搜索 -->
    <Row>
      <Col :offset="8" :span="8">
        <Input placeholder="请输入内容" class="webHomeSearch">
          <Button slot="append" icon="el-icon-search"></Button>
        </Input>
      </Col>
    </Row>
    <!-- 公司简介 -->
    <Row>
      <Col :offset="4" :span="16">
        <Row>
          <Col :offset="8" :span="8">
            <img
              src="@/assets/images/web_home_company_profile.png"
              class="webHomeProfileTitle"
            />
            <p class="webHomeProfileSubTitle">开放、变革、超越</p>
          </Col>
        </Row>
        <Carousel
          :interval="4000"
          indicator-position="none"
          type="card"
          height="250px"
        >
          <CarouselItem v-for="(item, index) in carouselSrcs" :key="index">
            <img :src="item.src" />
          </CarouselItem>
        </Carousel>
        <Row>
          <Col :span="24">
            <p class="webHomeProfileText">
              ************科技有限公司是一家专业从事信息安全技术和产品研发、信息系统安全集成和服务的高新技术企业。公司注册资金人民币1150万元，并全资控股“四川能士信通科技有限公司（原四川川大能士信息安全有限公司）”。公司及控股子公司是全国信息安全标准化技术委员会成员单位，获得了ISO9001:2015质量管理体系认证，是国家高技术产业化示范工程项目承担单位、国内首批商用密码产品生产、销售定点单位、第一批涉及国家秘密的计算机信息系统集成单位。依托多年深厚的技术积淀和相关高校和科研院所的技术、人才资源优势，面向全国的用户提供自主研发的信息安全产品及解决方案和服务，并以专业、标准、完善的信息安全技术研发和服务体系，聚焦工业信息安全领域，为国家的信息安全事业全力奉献，为工业系统行业用户保驾护航。
            </p>
          </Col>
        </Row>
      </Col>
    </Row>
    <!-- 产品中心 -->
    <Row class="webHomeProductCenter">
      <Col :offset="4" :span="16">
        <Row>
          <Col :offset="8" :span="8">
            <img
              src="@/assets/images/web_home_product_center.png"
              class="webHomeProfileTitle"
            />
            <p class="webHomeProfileSubTitle">全景感知智能分析系统</p>
          </Col>
        </Row>
        <Row>
          <Col :span="6">
            <div class="webHomeProductCenterList">
              <img
                src="@/assets/images/web_home_product1.png"
                class="webHomeProductCenterImg"
              />
            </div>
          </Col>
          <Col :span="6">
            <div class="webHomeProductCenterList">
              <img
                src="@/assets/images/web_home_product2.png"
                class="webHomeProductCenterImg"
              />
            </div>
          </Col>
          <Col :span="6">
            <div class="webHomeProductCenterList">
              <img
                src="@/assets/images/web_home_product3.png"
                class="webHomeProductCenterImg"
              />
            </div>
          </Col>
          <Col :span="6">
            <div class="webHomeProductCenterList">
              <img
                src="@/assets/images/web_home_product4.png"
                class="webHomeProductCenterImg"
              />
            </div>
          </Col>
        </Row>
        <Row>
          <Col :span="24">
            <p class="webHomeProfileText">
              全景感知智能分析系统是将行为学、免疫网络、人工智能与电力监控系统有机地结合起来，通过多维监测、智能分析和全景展现，实现防患于未然，（聪者）听于无声、（明者）见于无形。
              全景感知智能分析系统实现了变电站的网络通讯数据采集、协议快速识别和业务分析，建立一套本地系统运行模型和态势感知分析系统中心，存储各个电力监控系统态势感知装置发送上来的网络通讯数据、告警信息，并对这些数据进行关联分析、安全态势评估，及时发布预警、告警消息，可以在管理中心显示并管理所有远端监测装置，生成装置所在网络的设备间网络连接拓扑，实现全网态势感知数据分析、综合展示和远端监测装置的集中监测和控制。:2015质量管理体系认证，是国家高技术产业化示范工程项目承担单位、国内首批商用密码产品生产、销售定点单位、第一批涉及国家秘密的计算机信息系统集成单位。依托多年深厚的技术积淀和相关高校和科研院所的技术、人才资源优势，面向全国的用户提供自主研发的信息安全产品及解决方案和服务，并以专业、标准、完善的信息安全技术研发和服务体系，聚焦工业信息安全领域，为国家的信息安全事业全力奉献，为工业系统行业用户保驾护航。
            </p>
          </Col>
        </Row>
      </Col>
    </Row>
  </div>
</template>
<script>
import { Row, Col, Input, Button, Carousel, CarouselItem } from "element-ui";
export default {
  name: "WebHome",
  data() {
    return {
      // 走马灯图片地址
      carouselSrcs: [
        { src: require("@/assets/images/web_home_carousel1.png") },
        { src: require("@/assets/images/web_home_carousel1.png") },
        { src: require("@/assets/images/web_home_carousel1.png") },
        { src: require("@/assets/images/web_home_carousel1.png") }
      ]
    };
  },
  components: {
    Row,
    Col,
    Input,
    Button,
    Carousel,
    CarouselItem
  }
};
</script>
<style lang="scss" scoped>
.webHomeJoinUs {
  position: relative;
  .webHomeJoinUsBtn {
    width: 200px;
    height: 60px;
    font-size: 20px;
    position: absolute;
    top: 70%;
    left: 50%;
    margin-left: -100px;
    margin-top: -30px;
  }
}
.webHomeSearch {
  height: 60px;
  position: relative;
  top: -30px;
}
.webHomeProfileTitle {
  width: 100%;
  margin-top: 20px;
}
.webHomeProfileSubTitle {
  color: #888;
  font-size: 14px;
  text-align: center;
  margin-top: 0;
}
.webHomeProfileText {
  text-align: justify;
  font-size: 12px;
  color: #888;
  margin: 20px 0;
}
.webHomeProductCenter {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #f3f3f3;
  background-image: url("../../../assets/images/web_home_product_bg.png");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100%;
  .webHomeProductCenterList {
    text-align: center;
    margin-top: 20px;
    padding: 0 20px;
    .webHomeProductCenterImg {
      width: 100%;
    }
  }
}
</style>
